<template>
  <div id="app">
    <div class="top-bar">
      <div class="top-left">
        <div class="toggle-btn" @click="toggleNav">
          <i class="fas fa-bars"></i>
        </div>
        <div class="practice-info">
          <i class="fas fa-book"></i> {{ practiceData.subject }} 
        </div>
      </div>
      
      <div class="stats">
        <div class="stat-item">
          <i class="fas fa-check-circle"></i> 已完成: {{ completedCount }}/{{ totalCount }}
        </div>
        <div class="stat-item">
          <i class="fas fa-flag"></i> 标记: {{ markedCount }}
        </div>
        <div class="stat-item">
          <i class="fas fa-clock"></i> 用时: {{ formattedTime }}
        </div>
      </div>
      
      <div class="user-info" @click="userDropdown = !userDropdown">
        <i class="fas fa-user-circle"></i> {{ userInfo.studentName }}
        <div class="user-details" v-if="userDropdown">
          <p><strong>姓名:</strong> {{ userInfo.studentName }}</p>
          <p><strong>学号:</strong> {{ userInfo.studentId }}</p>
          <p><strong>班级:</strong> {{ userInfo.className }}</p>
          <p><strong>积分:</strong> {{ userInfo.points }}</p>
        </div>
      </div>
    </div>
    
    <div class="main-content" :class="{ 'nav-collapsed': !navOpen }">
      <div class="question-nav">
        <div class="nav-header">
          <span>题目导航</span>
          <i class="fas fa-times close-btn" @click="navOpen = false"></i>
        </div>
        
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color current-color"></div>
            <span>当前</span>
          </div>
          <div class="legend-item">
            <div class="legend-color unanswered-color"></div>
            <span>未答</span>
          </div>
          <div class="legend-item">
            <div class="legend-color answered-color"></div>
            <span>已答</span>
          </div>
          <div class="legend-item">
            <div class="legend-color marked-color"></div>
            <span>标记</span>
          </div>
        </div>
        
     <div class="question-types">
    <div class="question-type">
      <div class="type-title">
        <span>选择题 ({{ multiCount }}题)</span>
        <span>已答: {{ answeredChoiceCount }}</span>
      </div>
      <div class="question-list">
        <!-- 添加安全判断：确保 q 存在 -->
        <div v-for="(q, index) in questions.choice" 
              
             :key="'choice-'+q.id" 
             class="question-item"
             :class="{
               'current': currentQuestion.questionId === q.questionId && currentQuestion.questionType === q.questionType,
                'answered': q.userAnswer !== null && q.userAnswer !== undefined,
               'marked': q.marked
             }"
             @click="selectQuestion( q)">
          {{ index + 1 }}
        </div>
      </div>
    </div>
    
    <div class="question-type">
      <div class="type-title">
        <span>填空题 ({{ fillCount }}题)</span>
        <span>已答: {{ answeredFillCount }}</span>
      </div>
      <div class="question-list">
        <!-- 添加安全判断：确保 q 存在 -->
        <div v-for="(q, index) in questions.fill" 
             
             :key="'fill-'+q.id" 
             class="question-item"
             :class="{
               'current': currentQuestion.questionId === q.questionId && currentQuestion.questionType === q.questionType,
               'answered': q.userAnswer && q.userAnswer.some(a => a.trim() !== ''),
               'marked': q.marked
             }"
             @click="selectQuestion( q)">
          {{ index + multiCount + 1 }}
        </div>
      </div>
    </div>
    
    <div class="question-type">
      <div class="type-title">
        <span>判断题 ({{ judgeCount }}题)</span>
        <span>已答: {{ answeredJudgeCount }}</span>
      </div>
      <div class="question-list">
        <!-- 添加安全判断：确保 q 存在 -->
        <div v-for="(q, index) in questions.judge" 
               
             :key="'judge-'+q.id" 
             class="question-item"
             :class="{
               'current': currentQuestion.questionId === q.questionId && currentQuestion.questionType === q.questionType,
                'answered': q.userAnswer !== null && q.userAnswer !== undefined,
               'marked': q.marked
             }"
             @click="selectQuestion( q)">
          {{ index + multiCount + fillCount + 1 }}
        </div>
      </div>
    </div>
  </div>
        
        <div class="nav-footer">
          <button class="submit-btn" @click="submitPractice">
            <i class="fas fa-paper-plane"></i> 提交练习
          </button>
        </div>
      </div>
      
         <!-- 添加安全判断 -->
      <div class="question-container" v-if="currentQuestion" >
        <div class="question-header">
          <div class="question-title">
            <!-- 安全访问 type 属性 -->
            <template v-if="currentQuestion.questionType === '2'">选择题</template>
            <template v-else-if="currentQuestion.questionType === '3'">填空题</template>
            <template v-else-if="currentQuestion.questionType === '1'">判断题</template>
          </div>
          
          <div class="action-buttons">
            <button class="action-btn" @click="showAnswer = !showAnswer">
              <i class="fas fa-lightbulb"></i>
              <span>{{ showAnswer ? '隐藏答案' : '显示答案' }}</span>
            </button>

            <button class="action-btn" @click="toggleFavorite">
              <i class="fas" :class="currentQuestion.favorite ? 'fa-bookmark' : 'fa-bookmark-o'"></i>
              <span>{{ currentQuestion.favorite ? '取消收藏' : '收藏' }}</span>
            </button>
          </div>
        </div>
        
        
        <div class="question-content">
          <div class="question-text">
            <span class="question-number">{{ currentQuestionNumber }}</span>
            {{ currentQuestion.question }}
          </div>
          
          <div class="answer-area">
            <!-- 选择题 -->
            <div class="choices" v-if="currentQuestion.questionType === '2'">
  <div class="choice"
       :class="{ 'selected': currentQuestion.userAnswer === 0 }"
       @click="selectChoice(0)">
    <div class="choice-label">A</div>
    <div class="choice-text">{{ currentQuestion.aOption }}</div>
  </div>
  
  <!-- 选项B -->
  <div class="choice"
       :class="{ 'selected': currentQuestion.userAnswer === 1 }"
       @click="selectChoice(1)">
    <div class="choice-label">B</div>
    <div class="choice-text">{{ currentQuestion.bOption }}</div>
  </div>
  
  <!-- 选项C -->
  <div class="choice"
       :class="{ 'selected': currentQuestion.userAnswer === 2 }"
       @click="selectChoice(2)">
    <div class="choice-label">C</div>
    <div class="choice-text">{{ currentQuestion.cOption }}</div>
  </div>
  
  <!-- 选项D -->
  <div class="choice"
       :class="{ 'selected': currentQuestion.userAnswer === 3 }"
       @click="selectChoice(3)">
    <div class="choice-label">D</div>
    <div class="choice-text">{{ currentQuestion.dOption }}</div>
  </div>
            </div>
            
            <!-- 填空题 -->
            <div class="fill-blanks" v-if="currentQuestion.questionType === '3'">
               <!-- 动态生成填空框 -->
                    <div v-for="(_, index) in getBlankCount(currentQuestion.question)" 
                         :key="index" 
                         class="blank-item">
                      <div class="blank-number">({{ index + 1 }})</div>
                      <div class="blank-input">
                        <input type="text" 
                              v-model="currentQuestion.userAnswer[index]"
                               @blur="updateFillAnswer"
                               placeholder="请在此处填写答案">
                      </div>
                    </div>
            </div>
            
            <!-- 判断题 -->
            <div class="judge" v-if="currentQuestion.questionType === '1'">
              <div class="choices">
                <div class="choice" 
                     :class="{ 'selected': currentQuestion.userAnswer === true }"
                     @click="selectJudge(true)">
                  <div class="choice-label">T</div>
                  <div class="choice-text">正确</div>
                </div>
                <div class="choice" 
                     :class="{ 'selected': currentQuestion.userAnswer === false }"
                     @click="selectJudge(false)">
                  <div class="choice-label">F</div>
                  <div class="choice-text">错误</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="analysis-section" v-if="showAnswer">
            <div class="section-title">
              <i class="fas fa-check-circle"></i> 答案与解析
            </div>
            
            <div class="answer-content">
              <strong>正确答案：</strong>
              <span v-if="currentQuestion.questionType === '2'">
                {{ currentQuestion.answer }}
              </span>
              <span v-if="currentQuestion.questionType === '3'">
                ({{ formatFillAnswer(currentQuestion.answer) }})
              </span>
              <span v-if="currentQuestion.questionType === '1'">
                {{ currentQuestion.answer ? '正确' : '错误' }}
              </span>
            </div>
            
            <div class="explanation">
              <strong>解析：</strong> {{ currentQuestion.explanation }}
            </div>
          </div>
        </div>
        
        <div class="question-footer">
          <button class="footer-btn" @click="prevQuestion" :disabled="isFirstQuestion">
            <i class="fas fa-arrow-left"></i> <span>上一题</span>
          </button>
          
          <button class="footer-btn mark-btn" @click="toggleMark">
            <i class="fas" :class="currentQuestion.marked ? 'fa-flag' : 'fa-flag-o'"></i>
            <span>{{ currentQuestion.marked ? '取消标记' : '标记本题' }}</span>
          </button>
          
          <button class="footer-btn next-btn" @click="nextQuestion" :disabled="isLastQuestion">
            <span>下一题</span> <i class="fas fa-arrow-right"></i>
          </button>
        </div>
             
      </div>
    </div>

        <!-- 智能分析抽屉 -->
<!-- 修改后的智能分析抽屉 -->
<el-drawer 
  v-model="analysisDrawerVisible"
  direction="rtl"
  size="40%"
  class="analysis-drawer"
  v-loading="analysisLoading">
  
  <div class="drawer-header">
    <div class="drawer-title">题目智能分析</div>
  </div>
  
  <div class="drawer-content-wrapper">
    <!-- 聊天对话区域 -->
    <div class="chat-section">
      <div class="chat-section-title">
        <i class="fas fa-comments"></i> 小智学习助手
      </div>
      
      <!-- 在聊天消息区域添加等待指示器 -->
<div class="chat-messages">
  <div v-for="(msg, index) in chatMessages" :key="index" 
       :class="['message', msg.role]">
    <div class="message-avatar">
      <i v-if="msg.role === 'user'" class="fas fa-user"></i>
      <i v-else class="fas fa-robot"></i>
    </div>
    <div class="message-content">
      {{ msg.content }}
    </div>
  </div>
  
  <!-- 添加等待指示器 -->
  <div v-if="sendingMessage" class="message assistant">
    <div class="message-avatar">
      <i class="fas fa-robot"></i>
    </div>
    <div class="message-content">
      <div class="typing-indicator">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</div>
      
    </div>
    
    <div class="chat-input-container">
      <div class="chat-input">
        <el-input
          v-model="userMessage"
          type="textarea"
          :rows="3"
          placeholder="给答题助手小智提问吧"
          resize="none"
          @keyup.enter.ctrl="sendMessage"
        ></el-input>
        <el-button 
          type="primary" 
          @click="sendMessage"
          :loading="sendingMessage"
          class="send-button">
          发送
        </el-button>
      </div>
    </div>
  </div>
  
  <!-- 错误提示 -->
  <div v-if="analysisError" class="error-message">
    <i class="fas fa-exclamation-triangle"></i> {{ analysisError }}
  </div>
</el-drawer>
<!-- //提交时弹框 -->
 <el-dialog
    v-model="submitDialogVisible"
    title="练习结果"
    width="40%"
    center
    :close-on-click-modal="false"
    :show-close="true"
  >
    <div class="result-container">
      <div class="score-display">
        您的总分：<span class="score-value">{{ totalScore }}分</span>
      </div>
      
      <div class="evaluation" :class="evaluationClass">
        {{ evaluationText }}
      </div>
      
      <div class="result-details">
        <div class="detail-item">
          <i class="fas fa-check-circle"></i>
          <span>答对题数：{{ completedCount }}题</span>
        </div>
        <div class="detail-item">
          <i class="fas fa-clock"></i>
          <span>用时：{{ recordedFormattedTime }}</span>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="submitDialogVisible = false">继续答题</el-button>
        <el-button type="primary" @click="goToNewExercise">换一套试题</el-button>
      </div>
    </template>
  </el-dialog>

<!-- 修改悬浮按钮模板 -->
<div class="floating-assistant-btn" 
     ref="assistantBtn"
     :style="{ top: btnPosition.y + 'px', left: btnPosition.x + 'px' }"
     @mousedown="startDrag" 
     @click.stop="openAssistant">
  <i class="fas fa-robot"></i>
  <div class="tooltip">小智助手</div>
</div>

  </div>


</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { listExercise,chatWithAi } from '@/api/student/exercise/exercise';

const route = useRoute();
const router = useRouter();

// 用户信息
const userInfo = ref({
  studentName: '李明',
  studentId: 'S20230045',
  className: '高三(2)班',
  points: 1280
});

// 该次练习的详细信息
const practiceData = ref({
  subject: '计算机网络',
  topic: '函数专题',
  level: '中等',
  chapters: '函数与导数'
});

// 全部题目数组
const allQuestions = ref([]);

// 题目数据
;

// 状态变量
const navOpen = ref(true);
const userDropdown = ref(false);
const showAnswer = ref(false);
const currentQuestion = ref(null);
const timer = ref(null);
const elapsedSeconds = ref(0);
const loading = ref(true); // 添加加载状态
// 提交弹框开关
const submitDialogVisible = ref(false);
const recordedTime = ref(0); // 添加用于记录提交时间的变量

// 智能分析相关状态
// 修复抽屉显示状态变量
const analysisDrawerVisible = ref(false);
const analysisLoading = ref(false);
const analysisError = ref('');
const currentAnalysis = ref(null);
const chatMessages = ref([]);
const userMessage = ref('');
const sendingMessage = ref(false);

// 悬浮按钮位置和状态
const assistantBtn = ref(null);
const btnPosition = ref({ x: 30, y: 30 });
const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
// 添加初始按钮位置引用
const initialBtnPos = ref({ x: 0, y: 0 });

// 获取路由的查询参数
const course=ref(route.query.course)
const multiCount = ref(parseInt(route.query.multiCount) || 0);
const fillCount = ref(parseInt(route.query.fillCount) || 0);
const judgeCount = ref(parseInt(route.query.judgeCount) || 0);
// 映射字符串到数字
const levelMap = {
  'random': '0',
  'easy': '1',
  'medium': '3',
  'hard': '5'
};

// 将 `route.query.level` 转换成对应的数字
const level = ref(levelMap[route.query.level] || '0'); // 默认值为 0
const chapters = ref(route.query.chapters);

const allQuestionsInOrder = computed(() => {
  return [
    ...questions.value.choice,
    ...questions.value.fill,
    ...questions.value.judge
  ];
});

const currentQuestionIndex = computed(() => {
  if (!currentQuestion.value) return -1;
  return allQuestionsInOrder.value.findIndex(q => 
    q.questionId === currentQuestion.value.questionId &&
    q.questionType === currentQuestion.value.questionType
  );
});


// 计算属性 - 弹框中显示的用时
const recordedFormattedTime = computed(() => formatTime(recordedTime.value));


// 计算属性 - 按题型分类的题目
const questions = computed(() => {
  return {
    choice: allQuestions.value.filter(q => q.questionType === '2'),
    fill: allQuestions.value.filter(q => q.questionType === '3'),
    judge: allQuestions.value.filter(q => q.questionType === '1')
  };
})

// 计算属性
const totalCount = computed(() => multiCount.value + fillCount.value + judgeCount.value);


// 填空题回答数量
const answeredFillCount = computed(() => 
  questions.value.fill.filter(q => q.userAnswer && q.userAnswer.some(a => a.trim() !== '')).length
);

// 选择题回答数量
const answeredChoiceCount = computed(() => 
  questions.value.choice.filter(q => 
    q.userAnswer !== null && q.userAnswer !== undefined
  ).length
);

// 判断题回答数量
const answeredJudgeCount = computed(() => 
  questions.value.judge.filter(q => 
    q.userAnswer !== null && q.userAnswer !== undefined
  ).length
);

// 所有题目回答数量
const completedCount = computed(() => 
  answeredChoiceCount.value + answeredFillCount.value + answeredJudgeCount.value
);

const markedCount = computed(() => {
  return [...questions.value.choice, ...questions.value.fill, ...questions.value.judge]
    .filter(q => q.marked).length;
});

const formattedTime = computed(() => {
  const minutes = Math.floor(elapsedSeconds.value / 60);
  const seconds = elapsedSeconds.value % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});

// 题目编号
const currentQuestionNumber = computed(() => {
  if (!currentQuestion.value) return 1;
  
  const multiCount = questions.value.choice.length;
  const fillCount = questions.value.fill.length;
  
  // 定义复合键匹配函数
  const matchQuestion = (q) => {
    return q.questionType === currentQuestion.value.questionType && 
           q.questionId === currentQuestion.value.questionId;
  };
  
  if (currentQuestion.value.questionType === '2') {
    const index = questions.value.choice.findIndex(matchQuestion);
    return index !== -1 ? index + 1 : 1;
  }
  if (currentQuestion.value.questionType === '3') {
    const index = questions.value.fill.findIndex(matchQuestion);
    return index !== -1 ? multiCount + index + 1 : multiCount + 1;
  }
  if (currentQuestion.value.questionType === '1') {
    const index = questions.value.judge.findIndex(matchQuestion);
    return index !== -1 ? multiCount + fillCount + index + 1 : multiCount + fillCount + 1;
  }
  return 1;
});

const isFirstQuestion = computed(() => {
  return currentQuestionIndex.value === 0;
});

const isLastQuestion = computed(() => {
  return currentQuestionIndex.value === allQuestionsInOrder.value.length - 1;
});

//计算总分
const totalScore = computed(() => {
  let totalScore = 0;

  // 1. 计算选择题分数
  questions.value.choice.forEach(question => {
    if (question.userAnswer !== null && question.userAnswer !== undefined) {
      const selectedAnswer = String.fromCharCode(65 + question.userAnswer); // 0->'A', 1->'B', etc.
      if (selectedAnswer === question.answer) {
        totalScore += question.score; // 使用题目的分数属性
      }
    }
  })

  // 2. 计算填空题分数
  questions.value.fill.forEach(question => {
    if (question.userAnswer) {
      const correctAnswers = question.answer.split('，'); // 中文逗号分隔
      const isAllCorrect = correctAnswers.every((ans, index) => {
        return question.userAnswer[index]?.trim() === ans.trim();
      });
      
      if (isAllCorrect) {
        totalScore += question.score;
      }
    }
  })

  // 3. 计算判断题分数
  questions.value.judge.forEach(question => {
    if (question.userAnswer !== null && question.userAnswer !== undefined) {
      const userAnswer = question.userAnswer ? 'T' : 'F';
      if (userAnswer === question.answer) {
        totalScore += question.score;
      }
    }
  })
  return totalScore
})

// 根据总分计算弹框评价
const evaluationText = computed(() => {
  if (totalScore.value >= 90) return "很棒，你太优秀了！";
  if (totalScore.value >= 85) return "非常不错！";
  if (totalScore.value >= 70) return "再接再厉！";
  if (totalScore.value >= 60) return "及格了！";
  if (totalScore.value >= 30) return "很遗憾，不及格！";
  return "分数有点低呀，继续加油！";
})

// 根据分数添加不同的样式类
const evaluationClass = computed(() => {
  if (totalScore.value >= 90) return "excellent";
  if (totalScore.value >= 70) return "good";
  if (totalScore.value >= 60) return "pass";
  return "fail";
})

// 修复打开助手的方法
const openAssistant = () => {
  analysisDrawerVisible.value = true;
  loadAnalysis();
};

// 修复抽屉关闭处理
const handleDrawerClose = (done) => {
  currentAnalysis.value = null;
  chatMessages.value = [];
  userMessage.value = '';
  done();
};

// 初始化悬浮按钮位置
const initAssistantBtn = () => {
  // 从本地存储获取位置或使用默认值
  const savedPos = localStorage.getItem('assistantBtnPosition');
  if (savedPos) {
    btnPosition.value = JSON.parse(savedPos);
  } else {
    // 默认位置 - 右上角
    btnPosition.value = {
      x: window.innerWidth - 80,
      y: window.innerHeight - 150
    };
  }
};

// 在 script 中完善拖拽功能
// 修复拖拽功能
const startDrag = (e) => {
  isDragging.value = true;
  dragStartPos.value = { x: e.clientX, y: e.clientY };
  initialBtnPos.value = { ...btnPosition.value };
  
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
};

const onDrag = (e) => {
  if (!isDragging.value) return;
  
  const dx = e.clientX - dragStartPos.value.x;
  const dy = e.clientY - dragStartPos.value.y;
  
  btnPosition.value = {
    x: initialBtnPos.value.x + dx,
    y: initialBtnPos.value.y + dy
  };
  
  constrainButtonPosition();
};

const stopDrag = () => {
  isDragging.value = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
  localStorage.setItem('assistantBtnPosition', JSON.stringify(btnPosition.value));
};

// 确保按钮不会超出屏幕
const constrainButtonPosition = () => {
  const maxX = window.innerWidth - 60;
  const maxY = window.innerHeight - 60;
  
  btnPosition.value = {
    x: Math.max(10, Math.min(maxX, btnPosition.value.x)),
    y: Math.max(10, Math.min(maxY, btnPosition.value.y))
  };
};



// 提交练习显示弹框
const submitPractice = () => {
  // 记录当前用时
  recordedTime.value = elapsedSeconds.value;
  submitDialogVisible.value = true;
};

// 格式化时间函数（改为普通函数）
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 提交弹框换一套试题的函数
const goToNewExercise = () => {
  // 关闭弹框
  submitDialogVisible.value = false;

      router.push({ path: '/myExercise' });
};

// 计算填空题的空格数量（根据英文括号的数量）
const getBlankCount = (questionText) => {
  if (!questionText) return 0;
  const matches = questionText.match(/\(\)/g);
  return matches ? matches.length : 0;
};

// 添加填空题答案格式化函数
const formatFillAnswer = (answer) => {
  if (!answer) return '';
  // 将中文逗号分隔的字符串转换为数组
  const answers = answer.split('，');
  // 格式化为 (1) 答案1; (2) 答案2
  return answers.map((a, i) => `(${i+1}) ${a}`).join('; ');
};

// 初始化题目数据
const initQuestions =async () => {
  //访问接口获取练习题
  //需要参数判断题数量，填空题数量，选择题数量，难度，章节，课程
   const res =await listExercise({ 
                   course: course.value,
                  judgeCount: judgeCount.value,
                  multiCount: multiCount.value,
                  fillCount: fillCount.value,
                  level:level.value,
                  chapters: chapters.value          
    })
    allQuestions.value = res.rows;

    allQuestions.value = res.rows.map(q => {
    // 为填空题初始化 userAnswer 数组
    if (q.questionType === '3') {
      // 根据空格数量初始化答案数组
      const blankCount = getBlankCount(q.question);
      q.userAnswer = Array(blankCount).fill('');
    }else {
      // 选择题和判断题初始化为 undefined
      q.userAnswer = undefined;
    }
    return q;
  });
  
  // 设置当前题目为第一个选择题
  if (questions.value.choice.length > 0) {
    currentQuestion.value = questions.value.choice[0];
  } else if (questions.value.fill.length > 0) {
    currentQuestion.value = questions.value.fill[0];
  } else if (questions.value.judge.length > 0) {
    currentQuestion.value = questions.value.judge[0];
  }
  loading.value = false; // 数据加载完成
};

// 切换导航栏显示
const toggleNav = () => {
  navOpen.value = !navOpen.value;
};

// 选择题目
const selectQuestion = ( question) => {
  //选中题目直接把当前题目改成显示的题目
  currentQuestion.value=question
  console.log(currentQuestion.value)

  
}

// 选择选择题答案
const selectChoice = (index) => {
  currentQuestion.value.userAnswer = index;
};

// 选择判断题答案
const selectJudge = (answer) => {
  currentQuestion.value.userAnswer = answer;
};

// 更新填空题答案
const updateFillAnswer = () => {
  // 这里可以添加额外的逻辑处理
};

// 切换标记状态
const toggleMark = () => {
  currentQuestion.value.marked = !currentQuestion.value.marked;
};

// 切换收藏状态
const toggleFavorite = () => {
  currentQuestion.value.favorite = !currentQuestion.value.favorite;
};

// 上一题
const prevQuestion = () => {
  if (isFirstQuestion.value) return;
  const prevIndex = currentQuestionIndex.value - 1;
  currentQuestion.value = allQuestionsInOrder.value[prevIndex];
};

// 下一题
const nextQuestion = () => {
  if (isLastQuestion.value) return;
  const nextIndex = currentQuestionIndex.value + 1;
  currentQuestion.value = allQuestionsInOrder.value[nextIndex];
};

// 加载题目分析
const loadAnalysis = async () => {
  analysisLoading.value = true;
  analysisError.value = '';
  
  try {
    // 构建题目信息消息
    const questionInfo = buildQuestionInfo();
    userMessage.value=questionInfo
    
    // 重置聊天消息
    chatMessages.value = [{
      role: 'system',
      content: `我是你的学习伙伴 小智学习助手 哦，
      答题时有任何疑问都可以问我哟。我将使用洪荒之力尽可能的回答您的问题。`
    }]
    
    // 确保消息显示后滚动到底部
    setTimeout(() => {
      const container = document.querySelector('.chat-messages');
      if (container) container.scrollTop = container.scrollHeight;
    }, 100);
    
  } catch (error) {
    console.error('构建题目信息失败:', error);
    analysisError.value = '准备题目信息失败，请稍后再试';
  } finally {
    analysisLoading.value = false;
  }
};

// 构建题目信息字符串
const buildQuestionInfo = () => {
  if (!currentQuestion.value) return '暂无题目信息';
  
  const q = currentQuestion.value;
  let info = `题目类型：${getQuestionTypeName(q.questionType)},`;
  info += `题目内容：${q.question},`;

    // 正确答案
  info += `答案为：`;
  if (q.questionType === '2') {
    info += `${q.answer || '无'},`;
  } else if (q.questionType === '3') {
    info += `${formatFillAnswer(q.answer) || '无'}。`;
  } else if (q.questionType === '1') {
    info += `${q.answer ? '正确' : '错误'}。`;
  }
  
  // 选择题选项
  if (q.questionType === '2') {
    info += `A. ${q.aOption || '无'}`;
    info += `B. ${q.bOption || '无'}`;
    info += `C. ${q.cOption || '无'}`;
    info += `D. ${q.dOption || '无'}。`;
  }
  
  info+='亲爱的小智帮我分析下吧。。。'

  
  return info;
};

// 获取题型名称
const getQuestionTypeName = (type) => {
  switch (type) {
    case '2': return '选择题';
    case '3': return '填空题';
    case '1': return '判断题';
    default: return '未知题型';
  }
};

// 发送消息给AI（用户主动发送）
const sendMessage = async () => {
  if (!userMessage.value.trim()) return;
  
  const message = userMessage.value.trim();
  //清空
  userMessage.value = '';
  
      // 添加用户消息
    chatMessages.value.push({
      role: 'user',
      content: message
    })

  // 添加输入框发送状态
  const chatInput = document.querySelector('.chat-input');
  if (chatInput) {
    chatInput.classList.add('sending');
  }
  //发送中
  sendingMessage.value = true;

  // 清理掉system的发言
   chatMessages.value = chatMessages.value.filter(item => item.role !== 'system');

  
  try {
    // 发送聊天请求接口
    // console.log(message);
    // console.log(chatMessages.value.slice(-6))
    const response = await chatWithAi({
      message:message,
      history: chatMessages.value.slice(-6) // 发送最近5条消息作为上下文
    });
    
    
    // 添加AI回复
    chatMessages.value.push({
      role: 'assistant',
      content: response.msg
    });
    
  } catch (error) {
    console.error('发送消息失败:', error);
    chatMessages.value.push({
      role: 'assistant',
      content: '抱歉，我暂时无法回答这个问题，请稍后再试或者检查网络连接情况。'
    });
  } finally {
    sendingMessage.value = false;

        // 移除输入框发送状态
    if (chatInput) {
      chatInput.classList.remove('sending');
    }
    
    // 滚动到底部
    setTimeout(() => {
      const container = document.querySelector('.chat-messages');
      if (container) container.scrollTop = container.scrollHeight;
    }, 100);
  }
};


// 监听抽屉状态变化
watch(analysisDrawerVisible , async (newVal) => {
  if (newVal && currentQuestion.value) {
    // 打开抽屉时加载题目信息到对话框
    await loadAnalysis();
  } else {
    // 关闭抽屉时重置状态
    currentAnalysis.value = null;
    chatMessages.value = [];
    userMessage.value = '';
  }
});
// 初始化
onMounted(() => {
  initQuestions();
  initAssistantBtn();
  
  // 启动计时器
  timer.value = setInterval(() => {
    elapsedSeconds.value++;
  }, 1000);
  
  // 添加窗口大小变化监听器
  window.addEventListener('resize', constrainButtonPosition);
});

// 组件卸载前清理

onBeforeUnmount(() => {
  window.removeEventListener('resize', constrainButtonPosition);
});

</script>

<style>

/* 添加悬浮按钮的激活状态 */
.floating-assistant-btn.active {
  background: linear-gradient(135deg, #2980b9, #1a5276);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 提高悬浮按钮的z-index */
.floating-assistant-btn {
  z-index: 1000; /* 确保按钮在最上层 */
}



.floating-assistant-btn:active {
  animation: pulse 0.3s ease;
}


/* 添加拖拽时的样式 */
.floating-assistant-btn.dragging {
  cursor: grabbing;
  opacity: 0.9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}


.floating-assistant-btn {
  position: fixed;
  right: 30px; /* 在右下角 */
  bottom: 30px; /* 在底部 */
  width: 50px;
  height: 50px;
  background: url('@/assets/images/智能客服.jpg') no-repeat center center
              ; /* 合并背景图和渐变背景 */
  background-size: cover; /* 背景图自适应按钮大小 */
  color: white;
  border-radius: 50%; /* 圆形按钮 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: all 0.3s ease;
  font-weight: 500;
  user-select: none;
}




.floating-assistant-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  /* background: linear-gradient(135deg, #2980b9, #1a5276); */
}



.floating-assistant-btn:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.floating-assistant-btn:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



.floating-assistant-btn:active {
  transform: scale(0.95);
}

.floating-assistant-btn i {
  font-size: 24px;
}



.floating-assistant-btn:active {
  transform: scale(0.95);
}





.floating-assistant-btn:active {
  transform: translateY(1px);
}



/* 确保抽屉在最上层 */
.analysis-drawer {
  z-index: 2000 !important;
}

/* 添加点击反馈动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 提示工具 */
.tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}


/* 提示工具 */
.tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}



/* 未读消息徽章 */
.unread-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
  }
}

/* 移除原来位置的小智助手按钮 */
.action-buttons .btn-primary {
  display: none;
}

/* 添加打字指示器动画 */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
}

/* 增强等待效果 */
.chat-input .el-textarea__inner {
  background-color: #bbdae6; 
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  /* 添加过渡效果 */
  transition: all 0.3s ease;
}

/* 发送消息时改变输入框样式 */
.chat-input.sending .el-textarea__inner {
  background-color: #d1e7f0;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

/* 发送按钮加载状态样式 */
.send-button.is-loading {
  position: relative;
  color: transparent !important;
}

.send-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.result-container {
  text-align: center;
  padding: 20px;
}

.score-display {
  font-size: 24px;
  margin-bottom: 20px;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  color: #3498db;
}

.evaluation {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 12px;
}

.evaluation.excellent {
  color: #e74c3c;
  background: #ffeaea;
}

.evaluation.good {
  color: #f39c12;
  background: #fef5e7;
}

.evaluation.pass {
  color: #2ecc71;
  background: #eafaf1;
}

.evaluation.fail {
  color: #7f8c8d;
  background: #f8f9fa;
}

.result-details {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #555;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0 10px;
}

.el-button {
  padding: 12px 30px;
  font-size: 16px;
}
/* 添加在 <style> 部分的最后 */
.drawer-content-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px); /* 减去标题高度 */
}

.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 15px;
}

.chat-input-container {
  padding: 10px 0;
  background: #fff;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* 聊天输入框 */
.chat-input .el-textarea__inner {
  background-color: #bbdae6; 
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
}

.chat-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.send-button {
  align-self: flex-end;
}

/* 确保抽屉有足够的高度 */
.analysis-drawer .el-drawer__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px 20px;
}

/* 消息样式优化 */
.message {
  display: flex;
  margin-bottom: 15px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e1f0fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  flex-shrink: 0;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  background: #e1f0fa;
  word-break: break-word;
}

.message.user .message-content {
  background: #3498db;
  color: white;
}

/* 错误消息样式 */
.error-message {
  padding: 10px;
  text-align: center;
  color: #e74c3c;
  background: #fef0f0;
  border-radius: 4px;
  margin-top: 10px;
}
.analysis-drawer .el-overlay {
  pointer-events: none !important;
}
.analysis-drawer .el-drawer {
  pointer-events: auto;
}
.chat-section {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
  /* background-color: red; */
}

.chat-section-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #3498db;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-messages {
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 15px;
  padding: 10px;
  /* 聊天框背景色 */
  background: #f1fbff;
  border-radius: 8px;
}

.message {
  display: flex;
  margin-bottom: 15px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e1f0fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  background: #e1f0fa;
}

.message.user .message-content {
  background: #3498db;
  color: white;
}

.chat-input {
  margin-top: 15px;
}

.error-message {
  padding: 20px;
  text-align: center;
  color: #e74c3c;
}
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: #f5f7fa;
      color: #333;
    }
    
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }
    
    /* 顶部信息栏 */
    .top-bar {
      background: linear-gradient(135deg, #3498db, #1a5276);
      color: white;
      padding: 15px 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }
    
    .top-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .toggle-btn {
      font-size: 20px;
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .toggle-btn:hover {
      transform: scale(1.1);
    }
    
    .practice-info {
      font-size: 18px;
      font-weight: 500;
    }
    
    .user-info {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .user-details {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      color: #333;
      width: 220px;
      z-index: 200;
    }
    
    .user-details p {
      margin: 8px 0;
      font-size: 14px;
    }
    
    .stats {
      display: flex;
      gap: 20px;
    }
    
    .stat-item {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 8px 15px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* 主要内容区域 */
    .main-content {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    /* 左侧题目导航 */
    .question-nav {
      width: 280px;
      background: white;
      border-right: 1px solid #eaeaea;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
      z-index: 10;
    }
    
    .nav-collapsed .question-nav {
      transform: translateX(-100%);
    }
    
    .nav-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      font-weight: 600;
      color: #2c3e50;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .legend {
      display: flex;
      gap: 15px;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      flex-wrap: wrap;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
    }
    
    .legend-color {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
    
    .current-color { background-color: #e74c3c; }
    .unanswered-color { background-color: #ecf0f1; }
    .answered-color { background-color: #2ecc71; }
    .marked-color { background-color: #f39c12; }
    
    .question-types {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
    }
    
    .question-type {
      margin-bottom: 25px;
    }
    
    .type-title {
      font-weight: 600;
      margin-bottom: 12px;
      color: #3498db;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 5px;
      border-bottom: 1px dashed #eee;
    }
    
    .question-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    
    .question-item {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #ecf0f1;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
      position: relative;
      border: 1px solid transparent;
    }
    
    .question-item:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    .question-item.current {
      border: 2px solid #e74c3c;
      background: white;
      font-weight: bold;
    }
    
    .question-item.answered {
      background: #2ecc71;
      color: white;
    }
    
    .question-item.marked::after {
      content: "";
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background: #f39c12;
      border-radius: 50%;
    }
    
    .nav-footer {
      padding: 15px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: center;
    }
    
    .submit-btn {
      background: linear-gradient(135deg, #3498db, #2980b9);
      color: white;
      border: none;
      border-radius: 6px;
      padding: 10px 25px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    }
    
    /* 右侧答题区 */
    .question-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 20px;
    }
    
    .question-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      align-items: center;
    }
    
    .question-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .action-buttons {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      background: white;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
    }
    
    .action-btn:hover {
      background: #f8f9fa;
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .btn-primary {
      background: #3498db;
      color: white;
      border-color: #3498db;
    }
    
    .btn-primary:hover {
      background: #2980b9;
    }
    
    .question-content {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .question-text {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .question-number {
      display: inline-block;
      width: 28px;
      height: 28px;
      background: #3498db;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 28px;
      margin-right: 10px;
    }
    
    .answer-area {
      flex: 1;
    }
    
    .choices {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 30px;
    }
    
    .choice {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-radius: 8px;
      border: 1px solid #e0e0e0;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .choice:hover {
      border-color: #3498db;
      background: #f0f8ff;
    }
    
    .choice.selected {
      border-color: #3498db;
      background: #e1f0fa;
      font-weight: 500;
    }
    
    .choice-label {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ecf0f1;
      border-radius: 50%;
      margin-right: 15px;
      font-weight: 500;
    }
    
    .fill-blanks {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .blank-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .blank-number {
      font-weight: 500;
    }
    
    .blank-input {
      flex: 1;
    }
    
    .analysis-section {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px dashed #eaeaea;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #2c3e50;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .section-title i {
      color: #3498db;
    }
    
    .answer-content {
      background: #e8f4fe;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      line-height: 1.6;
    }
    
    .explanation {
      line-height: 1.6;
      color: #555;
    }
    
    .question-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }
    
    .footer-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 25px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.2s;
      border: 1px solid #ddd;
      background: white;
    }
    
    .footer-btn:hover {
      background: #f8f9fa;
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .mark-btn {
      border-color: #f39c12;
      color: #f39c12;
    }
    
    .mark-btn:hover {
      background: #fef9e7;
    }
    
    .next-btn {
      background: #3498db;
      color: white;
      border: none;
    }
    
    .next-btn:hover {
      background: #2980b9;
    }
    
    /* 智能分析抽屉 */
    .analysis-drawer {
      padding: 20px;
    }
    
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .drawer-title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .analysis-content {
      line-height: 1.8;
    }
    
    .analysis-section-drawer {
      margin-bottom: 25px;
    }
    
    .analysis-section-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #3498db;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .knowledge-points {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 15px 0;
    }
    
    .knowledge-tag {
      background: #e1f0fa;
      color: #2980b9;
      padding: 5px 12px;
      border-radius: 30px;
      font-size: 14px;
    }
    
    .similar-questions {
      margin-top: 15px;
    }
    
    .similar-question {
      padding: 12px;
      border-radius: 8px;
      background: #f8f9fa;
      margin-bottom: 10px;
      border-left: 3px solid #3498db;
    }
    
    .similar-question:hover {
      background: #edf7ff;
      cursor: pointer;
    }
    
    /* 响应式设计 */
    @media (max-width: 992px) {
      .question-nav {
        position: absolute;
        height: 100%;
        z-index: 100;
      }
      
      .nav-collapsed .question-nav {
        transform: translateX(-100%);
      }
      
      .stats {
        display: none;
      }
    }
    
    @media (max-width: 768px) {
      .question-list {
        grid-template-columns: repeat(4, 1fr);
      }
      
      .action-buttons {
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      
      .action-btn span {
        display: none;
      }
    }
    .loading-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #666;
}
</style>